<template>
  <div id="app" class="body-bg ">
    <div class="logo">
      <img src="../../static/img/logo.png" alt="">
    </div>
    <img class="logo-name" src="../../static/img/logoName.png" alt="">

    <!-- <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;padding-top: 30%;">
			<div>

				<img :src="info.logo" alt="" style="height: 70px;width: 70px;">
			</div>
			<div style="margin-top:20px ;margin-left:10px ;width: 60%;">
				<img :src="info.topimg" alt="" style="">

			</div>
		</div> -->
    <div class="logins">
      <van-cell-group>
        <van-field v-model="form.phone" type="tel" clearable placeholder="手机号" />
        <van-field v-model="form.sms" type="digit" center placeholder="验证码">
          <template #button>
            <van-button class="getCode" size="small" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <div v-show="hideshow" class="note">
      <div style="color: #848484;font-size: 12px;">登录即代表同意平台<a style="color:#E86E2C" @click="showPopup">《用户协议》</a>
      </div>
    </div>
    <img class="logBtn" src="../../static/img/log.png" alt="" @click="onSubmit(form)">
    <!-- <div class="deng1" style="position: relative;">
			<div class="deng2"  @click="onSubmit(form)">
				登录
			</div>
		</div> -->

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div style="padding: 3% 4%;font-size: 14px;" v-html="aboutcontent"></div>
    </van-popup>
    <div class="mask" v-if="!isRz">
      <div class="content">
        <van-cell-group class="group">
          <van-field class="ipt" v-model="authInfo.name" type="text" clearable placeholder="姓名" />
          <van-field class="ipt" v-model="authInfo.idCard" type="digit" center placeholder="身份证">
          </van-field>
          <div @click="getAuth" class="lastBtn ipt">立即认证</div>
        </van-cell-group>
        <div class="note">
          <img src="/static/img/fc.png" alt="">
          <p>蜂巢实时保障您的信息安全</p>
        </div>
      </div>
    </div>
  </div>

</template>
<style>
.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: #222222;
}

.logins {
  padding: 12% 0 16px;
}
.logins .van-cell-group {
  background-color: #222222 !important;
  padding: 0 40px !important;
}
.logins .van-cell-group .van-cell {
  margin-top: 50px;
  background-color: #222222 !important;
  color: #ffffff !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #4a4a4a !important;
}
.logins .van-icon {
  font-size: 22px !important;
}
.logins .van-button {
  color: #f1f1f1 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 61px;
}
.logins .van-button .van-button__text {
  color: #f1f1f1 !important;
}
.deng1 {
}
.logins .van-hairline--top-bottom::after,
.logins .van-hairline-unset--top-bottom::after {
  border-width: 1px 0;
  border: none;
}
.deng2 {
  padding: 2% 0;
  width: 70%;
  background-image: linear-gradient(0deg, #b2823b 0%, #f3c278 100%),
    linear-gradient(#f7be23, #f7be23);
  background-blend-mode: normal, normal;
  border-radius: 40px;
  text-align: center;
  margin: 0 auto;
  color: #222222;
  position: absolute;
  z-index: 100;
  left: 15%;
  font-size: 16px;
}
.logins .van-field__control {
  color: #ffffff !important;
}
.logins .van-cell::after {
  border: none !important;
}

.logins .van-button--default {
  border: none !important;
}
</style>
<style  scoped>
.body-bg .logo {
  width: 186px;
  height: 150px;
  background: url("../../static/img/logoBd.png") no-repeat 100% 100%;
  margin: 85px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.body-bg .logo img {
  width: 75px;
  height: 75px;
}
.body-bg .logo-name {
  display: block;
  width: 184px;
  height: 75px;
  margin: 8px auto 0;
}
.body-bg .logins .van-cell-group .getCode {
  background: rgba(228, 20, 20, 0.2);
}
.note {
  padding: 0 40px;
}
.logBtn {
  margin-top: 37px;
  margin-right: 40px;
  float: right;
  width: 75px;
  height: 75px;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.content {
  box-sizing: border-box;
  padding: 20px;
  width: 84vw;
  height: 50vh;
  margin: 20vh auto 0;
  background-image: url("/static/img/yz1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content .group {
  margin-top: 65%;
  background-color: transparent;
}
.content .group .ipt {
  border: 1px solid #fc6e20;
  margin-bottom: 12px;
  border-radius: 24px;
  padding: 5px 10px;
}
.lastBtn {
  background-color: #fc6e20;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}
.note img {
  margin-right: 5px;
}
</style>
<script>
import Vue from 'vue'
import JSEncrypt from 'jsencrypt'
import MonitorKeyboard from '@/utils/monitorKeyboard.js'
import {
  Toast
  ,
  CountDown
  ,
  Field
  ,
  CellGroup
  ,
  Button
  , Popup
} from 'vant'

Vue.use(Popup)
Vue.use(CountDown)
Vue.use(Button)

Vue.use(Field)
Vue.use(CellGroup)
Vue.use(Toast)
export default {
  data() {
    return {
      publicKey: '-----BEGIN PUBLIC KEY-----MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANa7VOggcvqlhFxlVWEsHR+NJ/mySRH4cCU73ho2ssou5RBJA81s/Bobj5MtDF1jqQPRKcYzrmsChDLjw5sG6nsCAwEAAQ==-----END PUBLIC KEY-----',
      info: [],
      images: [],
      tjlist: [],
      list: [],
      gonggao: '',
      value: '',
      value1: '',
      value2: '',
      immediate: false,
      loading: false,
      finished: false,
      page: 1, // 请求第几页
      total: 0, // 总共的数据条数
      description: '',
      time: 10 * 60 * 60 * 1000,
      timeData: {},
      sms: '',
      phone: '',
      show: false,
      getCode: '获取验证码',
      isGeting: false,
      count: 60,
      disable: false,
      form: {
        phone: '',
        sms: ''

      },
      // 认证信息
      authInfo: {
        name: '',
        idCard: '',
      },
      //是否认证
      isRz: true,
      aboutcontent: '',
      hideshow: 'true',
      docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
      showHeight: document.documentElement.clientHeight // 实时屏幕高度
    }
  },
  components: {},
  created: function () {
    this.$emit('footer', false)
  },

  mounted() {
    this.recordapi()
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight
      })()
    }
    this.getKeyboardState()
  },
  beforeDestroy() {
    this.monitorKeyboard.onEnd()
  },
  // 监听
  watch: {
    // showHeight:function() {
    //   if(this.docmHeight > this.showHeight){
    //     this.hideshow=false
    //   }else{
    //     this.hideshow=true
    //   }
    // }
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      this.$emit('footer', false)
    }
  },
  metaInfo() {
    const title = '登录'
    return {
      title,
      meta: [{
        description: this.info.description
      },
      {
        keywords: this.info.keyword
      }
      ]
    }
  },
  methods: {
    getKeyboardState() {
      this.monitorKeyboard = new MonitorKeyboard()
      this.monitorKeyboard.onStart()

      // 监听虚拟键盘弹出事件
      this.monitorKeyboard.onShow(() => {
        console.log('键盘弹出')
        this.hideshow = false
      })

      // 监听键盘收起的事件
      this.monitorKeyboard.onHidden(() => {
        console.log('键盘收起')
        this.hideshow = true
      })
    },
    onSubmit(form) {
      console.log(form)

      if (form.phone == '') {
        Toast('请填写手机号')
        return
      }
      let reg = /^1[3456789]\d{9}$/
      if (form.phone == '' || form.phone.length !== 11 || !reg.test(form.phone)) {
        Toast('请输入正确手机号')
        return false
      }
      if (form.sms == '') {
        Toast('请填写验证码')
        return
      }
      var that = this
      if (form.sms == '') {
        Toast('验证码不能为空')
        return
      }

      // if(form.sms===yzms ||  form.sms == 999999){

      that.$api.post('/member/usersave', { 'tel': form.phone, 'yzm': form.sms }).then(res => {
        console.log(res)
        if (res.code == 1) {
          that.show = false
          let userid = that.getEncrypt(res.userid.toString())
          localStorage.setItem('userid',res.userid)
          this.$cookieStore.setCookie('userid', userid, 360000)
          if (!res.is_certified) { //未实名认证
            this.isRz = false
            localStorage.setItem('is_certified',0)
          } else {
            localStorage.setItem('is_certified',1)
            Toast(res.msg)
            setTimeout(this.$router.replace('/'), 1500)
          }
        }
      })
      // }else{
      //   Toast('请输入正确验证码');
      // }
    },
    getAuth() {
      if (this.authInfo.name == '') {
        Toast('请输入姓名')
        return
      }
      if (this.authInfo.idCard == '') {
        Toast('请输入身份证号')
        return
      }
      // 身份证校验
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(this.authInfo.idCard)) {
        Toast('请输入正确的身份证号')
        return
      }
      this.$api.post('/member/certification',{id_card:this.authInfo.idCard+'',real_name:this.authInfo.name,userid:localStorage.getItem('userid')}).then(res=>{
       console.log(`%c◤HERE✈✈✈👀◢`,'color: #FFF; background-color: #FF6F91;font-size:29px;',res);
          Toast('认证成功')
          this.isRz=true
          localStorage.setItem('is_certified',1)
          setTimeout(this.$router.replace('/'), 1500)
      })
    },
    showPopup() {
      this.show = true
    },
    tiao(e) {

    },
    urllinks(e) {
      this.$router.push(e)
      console.log(e)
    },
    onSearch(e) {

    },

    recordapi() {
      var that = this
      that.$api.post('/Index/login', {}).then(res => {
        // res.userid=1;
        // let userid=that.getEncrypt(res.userid.toString())
        // //let userid=this.$encruption(res.userid)
        // that.$cookieStore.setCookie('userid' ,userid, 36000);
        that.info = res.info
        that.loading = false
        that.aboutcontent = res.info.about.content
      })
    },
    getVerifyCode() {
      var that = this
      var tel = that.form.phone
      console.log(tel)
      let reg = /^1[3456789]\d{9}$/
      if (tel == '' || tel.length !== 11 || !reg.test(tel)) {
        Toast('请输入正确手机号')
        return false
      }

      that.$api.post('/index/duanxin', { 'tel': tel }).then(res => {
        console.log(res)
        if (res.code == 1) {
          Toast('发送成功')
          var countDown = setInterval(() => {
            if (this.count < 1) {
              this.isGeting = false
              this.disable = false
              this.getCode = '获取验证码'
              this.count = 60
              clearInterval(countDown)
            } else {
              this.isGeting = true
              this.disable = true
              this.getCode = this.count-- + '秒后重发'
            }
          }, 1000)
        } else {
          Toast(res.msg)
          return false
        }
        this.$cookieStore.setCookie('yzms', res.msg, 61)
      })
    },
    getEncrypt(data) {
      let encrypt = new JSEncrypt()
      // 设置公钥
      encrypt.setPublicKey(this.publicKey)
      return encrypt.encrypt(data)
    },
    // 加载
    onJiazai: function () {
      var that = this
      that.recordapi()
    }
  }
}
</script>
